// 文章内容样式
.article-entry {
  color: var(--theme-text-color)

  &:before, &:after {
    content: ""
    display: table
  }

  &:after { clear: both }

  h1, h2, h3, h4, h5, h6 {
    font-weight: bold
    line-height: 1
    margin: 1em 0
  }
  
  p, table {
    line-height: --markdown-vertical
    margin: --markdown-vertical 0
  }
  
  table {
    width: 100%
    border-collapse: collapse
    border-spacing: 0
  }

  th {
    font-weight: bold
    border-bottom: 3px solid #ddd
    padding-bottom: 0.5em
  }

  td {
    border-bottom: 1px solid #ddd
    padding: 10px 0
  }
  
  a {
    text-decoration: none
    word-break: break-all
    border-bottom: 2px solid #dde0e0
    transition: border 0.3s ease
    color: var(--theme-link-color)

    &:hover {
      border-color: var(--theme-link-color)
    }
  }

  ul, ol, dl {
    margin-top: --markdown-vertical
    margin-bottom: --markdown-vertical
  }

  ul, ol {
    padding-left: 2em
    line-height: 1.6
  }

  ul { list-style-type: disc }
  
  ol { list-style-type: decimal }
  
  img, video {
    max-width: 100%
    height: auto
    display: block
    margin: auto
  }
  
  iframe { border: none }
    
  blockquote {
    font-family: Georgia, "Times New Roman", serif
    font-size: 1em
    color: var(--theme-low-color)
    border-left: 3px solid var(--theme-low-color)

    footer {
      font-size: 14px
      margin: --markdown-vertical 0
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif

      cite:before {
        content: "—"
        padding: 0 0.5em
      }
    }
  }

  .pullquote {
    text-align: left
    width: 45%
    margin: 0

    &.left {
      margin-left: 0.5em
      margin-right: 1em
    }

    &.right {
      margin-right: 0.5em
      margin-left: 1em
    }
  }

  .caption {
    color: #999
    display: block
    font-size: 0.9em
    margin-top: 0.5em
    position: relative
    text-align: center
  }

  .video-container {
    position: relative
    padding-top: 56.25%
    height: 0
    overflow: hidden

    iframe, object, embed {
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
      margin-top: 0
    }
  }
  
  del { color: var(--theme-low-color) }

  pre, code {
    font-family: "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace
  }

  code {
    padding: 0 0.3em
    background: var(--theme-low-color)
    text-shadow: 0 1px var(--theme-bg-high)
  }

  pre code {
    background: none
    text-shadow: none
    padding: 0
  }

  pre, .highlight {
    margin: --markdown-vertical 0
    background: #2d2d2d
    overflow: auto
    color: #ccc
  }

  .highlight .gutter pre, .gist .gist-file .gist-data .line-numbers {
    color: #666
    font-size: 0.85em
  }

  .highlight {
    pre {
      border: none
      margin: 0
      padding: 0
    }

    table {
      margin: 0
      width: auto
    }

    td {
      border: none
      padding: 0
    }

    figcaption {
      font-size: 0.85em
      color: #999
      line-height: 1em
      margin-bottom: 1em

      &:before, &:after {
        content: ""
        display: table
        clear: both
      }

      a { float: right }
    }

    .gutter pre {
      text-align: right
      padding-right: 20px
    }

    .line {
      height: 22.400000000000002px

      &.marked {
        background: #515151
      }
    }
  }

  // flex center
  .flex-center {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  // aplayer 样式
  .aplayer {
    margin: --markdown-vertical 0

    .aplayer-info .aplayer-music .aplayer-author {
      color: var(--theme-stress-color)
    }
    .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path {
      fill: var(--theme-stress-color)
    }

    .aplayer-lrc:before {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, var(--theme-bg-color))
    }
    .aplayer-lrc:after {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, var(--theme-bg-color))
    }
    .aplayer-lrc p {
      color: var(--theme-text-color)
    }
  }
  
  // dplayer 样式
  .dplayer {
    width: 100%
    margin: --markdown-vertical 0
    overflow: hidden
    transition: all 0.3s ease
  }

  // 自定义插入图片
  .figure-image {
    margin: --markdown-vertical 0;

    img {
      display: block
      max-width: 100%
    }

    figcaption {
      padding: 0 1rem
      margin-top: 0.8rem
      line-height: 1.5
      text-align: center
      color: #999999
    }
  }

  // 自定义插入书签
  .bookmark-card {
    transition: all 0.3s ease
    border-radius: 10px
    overflow: hidden
    margin: --markdown-vertical 0;

    &:hover {
      transform: translateY(-3%)
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2)
    }

    .bookmark-container {
      display: flex
      border: none
      color: var(--theme-stress-color)
      background-color: var(--theme-low-color)

      .bookmark-content {
        flex: 1
        padding: 20px

        .bookmark-name {
          font-size: 20px
          font-weight: bolder
          margin-bottom: 15px
        }
        
        .bookmark-link {
          font-size: 14px
        }
      }

      .bookmark-cover {
        position: relative
        min-width: 25%
        max-height: 100%

        img {
          display: block
          position: absolute
          top: 0
          left: 0
          width: 100%
          height: 100%
          object-fit: cover
        }
      }
    }
  }

  // 自定义插入画廊
  .waterfall-container {
    margin: --markdown-vertical 0;

    p {
      display: block
      border-radius: 4px
      overflow: hidden
      margin: 0
    }
  }
}

@media mq-pc {
  .article-entry {
    blockquote {
      padding-left: 1em
    }

    pre, .highlight {
      padding: 15px 20px
    }

    .highlight {
      margin-left: -(--pc-padding)
      margin-right: -(--pc-padding)
    }

    .highlight .gutter pre {
      padding-right: 20px
    }
  }

  .article-entry .aplayer {
    soft-box(12px, 5px)
  }

  .article-entry .dplayer {
    soft-box(12px, 5px)
  }

  .figure-image.max {
    margin-left: -(--pc-padding)
    margin-right: -(--pc-padding)
  }

  .waterfall-container.max {
    margin-left: -(--pc-padding)
    margin-right: -(--pc-padding)
  }
}

@media mq-mb {
  .article-entry {
    blockquote {
      padding-left: 0.5em
    }

    pre, .highlight {
      padding: 7px 10px
    }

    .highlight {
      margin-left: -(--mb-padding)
      margin-right: -(--mb-padding)
    }

    .highlight .gutter pre {
      padding-right: 10px
    }
  }

  .article-entry .aplayer {
    soft-box(8px, 3px)
  }

  .article-entry .dplayer {
    soft-box(8px, 3px)
  }

  .figure-image.max {
    margin-left: -(--mb-padding)
    margin-right: -(--mb-padding)
  }

  .waterfall-container.max {
    margin-left: -(--mb-padding)
    margin-right: -(--mb-padding)
  }
}